<template>
  <ul>
    <!-- 注册登录界面 -->
    <template v-if="!showChild">
      <img class="user_img" src="../../assets/image/consignee.png" alt />
      <span class="user_name">{{user}}</span>
      <button @click="onSignoutClick" v-if="signOut" class="sign_out">退出登录</button>

      <!-- fomr表单 -->
      <van-form @submit="onUserLogin" v-if="registerShow">
        <van-field
          v-model="userName"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="passWord"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 1rem;">
          <van-button style="margin-bottom:.5rem" round block type="info" native-type="submit">登录</van-button>
          <van-button round block type="info" native-type="button" @click="onUserRegister">注册</van-button>
        </div>
      </van-form>
    </template>
    <!-- 用户注册 -->
    <template v-if="showChild">
      <ul>
        <!-- 用户名 -->
        <li>
          <div class="label">
            <img class="li_icon" src="../../assets/image/consignee.png" />
            <span class="li_txt">用户名</span>
          </div>
          <div class="label">
            <input type="text" @blur="userNameBlur" v-model="registerName" placeholder="请输入用户名" />
          </div>
        </li>
        <!-- 密码 -->
        <li>
          <div class="label">
            <img class="li_icon" src="../../assets/image/Password.png" />
            <span class="li_txt">用户密码</span>
          </div>
          <div class="label">
            <input
              type="password"
              @blur="passWordBlur"
              v-model="registerPassWord"
              placeholder="请输入密码"
            />
          </div>
        </li>
        <!-- 在次验证密码 -->
        <li>
          <div class="label">
            <img class="li_icon" src="../../assets/image/Password.png" />
            <span class="li_txt">确认密码</span>
          </div>
          <div class="label">
            <input
              type="password"
              @blur="passWordBlur1"
              v-model="registerPassWord1"
              placeholder="请再次输入密码"
            />
          </div>
        </li>
        <!-- 公司名称 -->
        <li>
          <div class="label">
            <img class="li_icon" src="../../assets/image/company.png" />
            <span class="li_txt">公司名称</span>
          </div>
          <div class="label">
            <input type="text" v-model="companyName" />
          </div>
        </li>
        <!-- 法人代表 -->
        <li>
          <div class="label">
            <img class="li_icon" src="../../assets/image/legalPerson.png" />
            <span class="li_txt">法人代表</span>
          </div>
          <div class="label">
            <input type="text" v-model="represent" />
          </div>
        </li>
        <!-- 官方专用账户 -->
        <li>
          <div class="label">
            <img class="li_icon" src="../../assets/image/Official.png" />
            <span class="li_txt">官方专用账户</span>
          </div>
          <div class="label">
            <input type="text" v-model="account" />
          </div>
        </li>
        <!-- 捐赠事务联系人 -->
        <li>
          <div class="label">
            <img class="li_icon" src="../../assets/image/Contacts.png" />
            <span class="li_txt">捐赠事务联系人</span>
          </div>
          <div class="label">
            <input type="text" v-model="contact" />
          </div>
        </li>
        <!-- 联系人电话 -->
        <li>
          <div class="label">
            <img class="li_icon" src="../../assets/image/Telephone.png" />
            <span class="li_txt">联系人电话</span>
          </div>
          <div class="label">
            <input type="text" v-model="phone" />
          </div>
        </li>
        <!-- 联系地址 -->
        <li>
          <div class="label">
            <img class="li_icon" src="../../assets/image/directional.png" />
            <span class="li_txt">联系地址</span>
          </div>
          <div class="label">
            <input type="text" v-model="address" />
          </div>
        </li>
        <!-- 邮政编码 -->
        <li>
          <div class="label">
            <img class="li_icon" src="../../assets/image/PostalCode.png" />
            <span class="li_txt">邮政编码</span>
          </div>
          <div class="label">
            <input type="text" v-model="zipCode" />
          </div>
        </li>
        <!-- 确定按钮 -->
        <button class="btn" @click="onRegisterChild">确定</button>
      </ul>
    </template>
  </ul>
</template>
<script>
export default {
  name: "Personal",
  data() {
    return {
      registerShow: true,
      showChild: false,
      signOut: false,
      user: "",
      userName: "",
      passWord: "",
      userinfo: [], // 用户登录信息
      registerName: "",
      registerPassWord: "",
      registerPassWord1: "",
      companyName: "",
      represent: "",
      account: "",
      contact: "",
      phone: "",
      address: "",
      zipCode: ""
    };
  },
  // 页面率刷新页面内容不改变
  mounted() {
    if (window.localStorage.length != 1) {
      console.log("aaa");
      this.user = JSON.parse(localStorage.getItem("login")).res.user.userName;
      this.registerShow = false; // 用户登录隐藏
      this.signOut = true; // 登录成功显示退出登录按钮
    }
    if (window.localStorage.length == 1) {
      return;
    }
  },

  methods: {
    // 退出登录
    onSignoutClick() {
      this.showChild = false;
      this.registerShow = true;
      this.signOut = false;
      (this.user = ""),
        (this.userName = ""),
        (this.passWord = ""),
        window.localStorage.clear();
    },
    // 登录
    onUserLogin(values) {
      let params = {
        userName: this.userName,
        password: this.passWord
      };
      this.$api
        .requestLoginTrackUser(params)
        .then(res => {
          this.registerShow = false;
          if (res.msg == "登录成功") {
            localStorage.setItem(
              "login",
              JSON.stringify({
                res
              })
            );
          }
          this.user = res.user.userName; // 登录成功显示用户名
          this.signOut = true; // 登录成功显示退出登录按钮
        })
        .catch(err => {
          this.$dialog.alert({
            message: err
          });
        });
    },
    // 注册
    onUserRegister() {
      this.showChild = true; // 只显示注册列表
    },
    //注册名
    userNameBlur() {
      if (!this.registerName) {
        this.$toast("用户名不能为空");
      }
    },
    //密码
    passWordBlur() {
      if (!this.registerName) {
        this.$toast("密码不能为空");
      }
    },
    //第二次输入密码密码
    passWordBlur1() {
      if (!this.registerName) {
        this.$toast("请确认密码");
      }
    },
    // 提交注册信息
    onRegisterChild() {
      // if 两次注册密码不一致 || 注册密码为空，弹出错误提示框
      if (
        this.registerPassWord != this.registerPassWord1 ||
        !this.registerPassWord
      ) {
        this.$dialog.alert({
          message: "两次密码输入不一致"
        });
      } else {
        let params = {
          userName: this.registerName,
          password: this.registerPassWord,
          companyName: this.companyName,
          represent: this.represent,
          account: this.account,
          contact: this.contact,
          phone: this.phone,
          address: this.address,
          zipCode: this.zipCode
        };
        this.$api
          .requestRegister(params)
          .then(res => {
            // 用户名重复
            if (res == "用户名已存在") {
              console.log("res", res);
              this.$dialog.alert({
                message: res
              });
            }
            // 注册成功设置缓存
            localStorage.setItem(
              "register",
              JSON.stringify({
                res
              })
            );
            // 调用登录接口
            let paramsLogin = {
              userName: this.registerName,
              password: this.registerPassWord
            };
            this.$api
              .requestLoginTrackUser(paramsLogin)
              .then(res => {
                console.log(res);
                localStorage.setItem(
                  "login",
                  JSON.stringify({
                    res
                  })
                );
                this.user = res.user.userName; // 登录成功显示用户名
                this.signOut = true; // 登录成功显示退出登录按钮
                this.registerShow = false; // 注册列表隐藏
                this.showChild = false; // 用户登录显示
              })
              .catch(err => {
                this.$dialog.alert({
                  message: err
                });
              });
          })
          .catch(err => {
            this.$dialog.alert({
              message: err
            });
            this.showChild = true; // 注册列表显示
            this.registerShow = true; // 用户登录显示
            this.signOut = false; // 退出登录按钮显示
          });
      }
    }
  }
};
</script>
<style>
.personal {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.setImg {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
}

.user_img {
  margin-top: 30%;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
}
.user_name {
  color: #b1b1b1;
  margin: 0.5rem auto 1rem;
}

.sign_out {
  width: 60%;
  height: 2.5rem;
  border: none;
  border-radius: 3rem;
  color: #fff;
  background: #8ba693;
  position: absolute;
  left: 50%;
  margin: -30%;
  bottom: 35%;
}
</style>
